<template>
	<!-- 公共模态框 (kuang) -->
	<u-modal v-model="valueCom" :showTitle="false" :showConfirmButton="false" maskCloseAble  :width="width" @cancel="cancel">
		<view class="slot-content">
			<view class="title c3">{{title}}</view>
			<u-line color="#EEE" :hair-line="false" direction="row" length="100%" margin="23rpx 0 35rpx 0" />
			<view class="desc c3" v-if="desc">{{desc}}</view>
			<slot></slot>
			<view class="df jcsa mt50 mb40 p030">
				<u-button shape="circle" v-if="showCancel" @click='cancel' :custom-style="{'border-radius': '34rpx' ,width:'245rpx', fontSize: '28rpx', color: '#48A147',borderColor:'#48A147', height: '68rpx', background: '#ffffff',marginRight:'30rpx'}" ripple>{{cancelName}}</u-button>
				<u-button shape="circle"  @click='confirm' :custom-style="{'border-radius': '34rpx' ,minWidth:confirmWidth, fontSize: '28rpx', color: '#fff', height: '68rpx', background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%);'}" ripple>{{confirmName}}</u-button>
			</view>
		</view>
	</u-modal>
</template>

<script>
	export default {
		props: {
			width:{
				type: String,
				default: '580'
			},
			// 是否显示Modal
			value: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '提示'
			},
			desc: String,
			cancelName: {
				type: String,
				default: '取消'
			},
			showCancel: {
				type: Boolean,
				default: true
			},
			confirmName: {
				type: String,
				default: '确定'
			},
			confirmWidth: {
				type: String,
				default: '245rpx'
			},
		},
		computed: {
			valueCom: {
				get () {
					return this.value
				},
				set (val) {
					this.cancel()
				}
			}
		},
		methods: {
			// 取消
			cancel () {
				this.$emit('cancel')
				this.$emit('input', false)
			},
			// 确认
			confirm () {
				this.cancel()
				this.$emit('confirm')
				
			},
			popupClose () {
				this.$emit('input', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content{
		text-align: center;
		padding-top: 30rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.desc{
			font-size: 30rpx;
			margin-top: 60rpx;
			margin-bottom: 60rpx;
			font-weight: bold;
		}
	}
</style>
